<template>
  <view class="history-page">
    <view class="header">
      <view class="back-btn" @click="goBack">
        <view class="back-arrow"></view>
      </view>
      <view class="title">
        <text class="icon-history">📅</text>
        历史上的今天
      </view>
      <view class="date">
        <text class="icon-calendar">📆</text>
        {{ formattedDate }}
      </view>
    </view>

    <scroll-view class="content" scroll-y>
      <view class="history-list" v-if="historyEvents.length">
        <view class="list-header">
          <text class="icon">📜</text>
          <text>历史事件</text>
        </view>
        <view class="history-item" v-for="(event, index) in historyEvents" :key="index">
          <view class="year">
            {{ event.year }}
            <text class="year-label">年</text>
          </view>
          <view class="divider"></view>
          <view class="event-content">
            <view class="event-tag">
              <text class="tag-icon">📌</text>
              <text class="tag-text">历史事件</text>
            </view>
            <text class="event-text">{{ event.title }}</text>
            <text class="event-desc">{{ event.desc }}</text>
          </view>
        </view>
      </view>

      <view class="empty-state" v-else>
        <view class="empty-icon">📜</view>
        <text class="empty-text">正在寻找历史故事...</text>
        <view class="loading-dots">
          <text class="dot"></text>
          <text class="dot"></text>
          <text class="dot"></text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getHistoryToday } from '@/api/hotnew'

const historyEvents = ref([])
const formattedDate = ref('')

const formatDate = () => {
  const date = new Date()
  const month = date.getMonth() + 1
  const day = date.getDate()
  formattedDate.value = `${month}月${day}日`
}

const goBack = () => {
  uni.navigateBack()
}

const loadHistoryEvents = async () => {
  try {
    const data = await getHistoryToday()
    if (data && data.data) {
      historyEvents.value = data.data.map(item => ({
        year: item.year,
        title: item.title,
        desc: item.desc
      }))
    }
  } catch (error) {
    console.error('获取历史数据失败:', error)
    uni.showToast({
      title: '获取历史数据失败',
      icon: 'none'
    })
  }
}

onMounted(() => {
  formatDate()
  loadHistoryEvents()
})
</script>

<style lang="scss">
.history-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1c92d2 0%, #79cedc 50%, #f2fcfe 100%);

  .header {
    padding: calc(44px + var(--status-bar-height)) 20px 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    position: relative;
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);

    .back-btn {
      position: absolute;
      left: 20px;
      bottom: 16px;
      width: 32px;
      height: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transition: all 0.3s ease;

      .back-arrow {
        width: 10px;
        height: 10px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(45deg);
        margin-left: 3px;
        margin-right: -3px;
      }

      &:active {
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.3);

        .back-arrow {
          opacity: 0.8;
        }
      }
    }

    .title {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;

      .icon-history {
        font-size: 24px;
        animation: swing 2s ease-in-out infinite;
      }
    }

    .date {
      text-align: center;
      font-size: 15px;
      color: rgba(255, 255, 255, 0.9);
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;

      .icon-calendar {
        font-size: 18px;
      }
    }
  }

  .content {
    height: calc(100vh - var(--status-bar-height) - 110px);
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;

    .history-list {
      width: 100%;
      padding: 20px 0;

      .list-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 4px 16px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 16px;
        font-weight: 500;

        .icon {
          font-size: 20px;
        }
      }

      .history-item {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(12px);
        border-radius: 20px;
        padding: 20px;
        margin-bottom: 16px;
        display: flex;
        gap: 16px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        width: 100%;
        box-sizing: border-box;

        &:last-child {
          margin-bottom: 0;
        }

        &:active {
          transform: scale(0.98);
          background: rgba(255, 255, 255, 0.2);
        }

        .year {
          font-size: 24px;
          font-weight: 600;
          color: #fff;
          min-width: 80px;
          text-align: center;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
          align-self: flex-start;
          padding-top: 4px;
          position: relative;

          .year-label {
            position: absolute;
            right: -4px;
            top: 4px;
            font-size: 12px;
            opacity: 0.8;
          }
        }

        .divider {
          width: 2px;
          background: rgba(255, 255, 255, 0.25);
          border-radius: 1px;
          margin: 4px 0;
        }

        .event-content {
          flex: 1;

          .event-tag {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background: rgba(255, 255, 255, 0.15);
            padding: 4px 8px;
            border-radius: 12px;
            margin-bottom: 8px;

            .tag-icon {
              font-size: 14px;
            }

            .tag-text {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.9);
            }
          }

          .event-text {
            font-size: 17px;
            color: #fff;
            line-height: 1.5;
            margin-bottom: 10px;
            display: block;
            font-weight: 500;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
          }

          .event-desc {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            display: block;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
          }
        }
      }
    }

    .empty-state {
      position: absolute;
      left: 20px;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(12px);
      border-radius: 20px;
      padding: 40px 20px;
      box-sizing: border-box;

      .empty-icon {
        font-size: 56px;
        animation: floating 2s ease-in-out infinite;
      }

      .empty-text {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
      }

      .loading-dots {
        display: flex;
        gap: 4px;
        margin-top: 8px;

        .dot {
          width: 6px;
          height: 6px;
          background: #fff;
          border-radius: 50%;
          opacity: 0.6;
          animation: loading 1.4s infinite;

          &:nth-child(2) {
            animation-delay: 0.2s;
          }

          &:nth-child(3) {
            animation-delay: 0.4s;
          }
        }
      }
    }
  }
}

@keyframes floating {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes swing {
  0%, 100% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

@keyframes loading {
  0%, 100% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;

  &:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

@media (prefers-color-scheme: dark) {
  .history-page {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);

    .history-list .history-item {
      background: rgba(255, 255, 255, 0.12);
    }
  }
}
</style>